import React, { PureComponent } from 'react'
import {
  ListItem,
  ListInfo,
  LoadMore
} from '../style'
import { Link } from 'react-router-dom'
import {
  getMoreList
} from '../store/actionCreators'
import { connect } from 'react-redux'
class List extends PureComponent {
  render() {
    return (
      <div>
        {
          this.props.articleList.map((item, index) => (
            <Link key={index} to={'/detail/' + item.get('id')}>
              <ListItem >
              <img className='list-pic' src={item.get('imgUrl')} alt=''/>
              <ListInfo>
                <h3 className='title'>{item.get('title')}</h3>
                <p className='desc'>{item.get('desc')}</p>
              </ListInfo>
            </ListItem>
            </Link>
            
          ))
        }
        <LoadMore onClick={() => this.props.getMoreList(this.props.page)}>更多文字</LoadMore>
      </div>
    )
  }
}
const mapStateToProps = state => ({
  articleList: state.getIn(['home', 'articleList']),
  page: state.getIn(['home', 'articlePage'])
})
const mapDispatchToProps = dispatch => ({
  getMoreList(page) {
    dispatch(getMoreList(page))
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(List)